<template>
  <div class="FloatBall" @click="menu = !menu" ref="floatBall" @touchstart="touchstart" @touchmove.prevent="touchmove">
    <div class="photo">
      <img
        :src="
          menu
            ? 'http://47.115.51.185/h5/img/close.446e8669.gif'
            : 'http://47.115.51.185/h5/img/open.7da41017.gif'
        "
        alt=""
      />
    </div>
    <div :class="{ menu: true, changleft: menu }" @click.stop>
      <router-link to="/">
        <van-icon name="wap-home-o" />
      </router-link>
      <router-link to="/cart">
        <van-icon name="shopping-cart-o" />
      </router-link>
      <router-link to="/user">
        <van-icon name="manager-o" />
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: true,
    };
  },
  methods: {
    ToRoute(path) {
      this.$router.push({ path });
    },
    touchstart(e){
      var offsetTop = this.$refs.floatBall.offsetTop;
      this.startY = e.touches[0].clientY - offsetTop;
    },
    touchmove(e){
      this.endY = e.touches[0].clientY;
      var moveY = this.endY - this.startY;
      if(moveY < 0){
        moveY = 0
      }else if(moveY > window.innerHeight * 0.75){
        moveY = window.innerHeight * 0.75;
      }
      this.$refs.floatBall.style.top = moveY  * 10 / (window.innerHeight*0.75) + "rem";
    }
  },
};
</script>

<style lang="less">
.FloatBall {
  position: fixed;
  right: 15px;
  top: 9rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  z-index: 999;
  .photo {
    width: 100%;
    height: 100%;
    transform: rotate(90deg);
    display: flex;
    justify-content: center;
    align-items: center;
    >img {
      width: 46px;
      height: 46px;
    }
  }
  .menu {
    width: 135px;
    height: 40px;
    border-radius: 35px;
    position: absolute;
    left: -150px;
    top: 2.5px;
    background-color: #f44939;
    font-size: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: left 0.5s cubic-bezier(0.37, 1.08, 0, 1.36);
    a {
      flex: 1;
      text-align: center;
      line-height: 40px;
      height: 40px;
      i {
        color: white;
        vertical-align: -2px;
      }
    }
    &.changleft {
      left: 61px;
    }
  }
}
</style>